<template lang="">
  <div>
    <!-- 搜索 -->
    <QueryForm :searchForm="searchForm" :items="items" @search="search" @list="list"></QueryForm>
    <!-- 操作按钮区域 -->
    <div class="btn-panel">
      <el-button type="success" size="small" icon="el-icon-plus" @click="addBtn">添加实习/工作经历</el-button>
      <el-button type="danger" size="small" icon="el-icon-delete" @click="deleteMany">批量删除</el-button>
    </div>
    <!-- 表格 -->
    <Table1 ref="multipleTable" :tableData="tableData" :tableCols="tableCols" @showEditView="showEditView()"
      @deleteUser="del">
      <template v-if="scope.data.resume!=null" slot="slot_resume" slot-scope="scope">
        {{scope.data.resume.name}}
      </template>

    </Table1>
    <div style="margin-top: 20px">
      <!-- 分页组件 -->
      <Page1 :pages="pages" :total="total" @handleCurrentChange="handleCurrentChange"
        @handleSizeChange="handleSizeChange"></Page1>

      <Add v-if="addParam.visible" :addParam="addParam" @addSave="addSave"></Add>
      <Edit v-if="editParam.visible" :editParam="editParam" @doUpdate="doUpdate"></Edit>
    </div>
  </div>
</template>
<script>
import Add from '@/components/Add'
import Edit from '@/components/Edit'
import Table1 from '@/components/Table1'
import Page1 from '@/components/Page1'
import QueryForm from '@/components/QueryForm'
import local from '@/store/local.js'

export default {
  name: 'experience',
  components: {
    Add,
    Edit,
    Table1,
    Page1,
    QueryForm,
  },
  data() {
    return {
      // 查询的表单
      searchForm: {
        //查询的表单
        name: '',
      },
      // 查询
      items: [
        {
          type: 'text',
          label: '公司名称：',
          name: 'name',
          placeholder: '按公司名称查询',
        },
      ],
      // 表格
      total: 0,
      pages: 1,
      currentPage: 1,
      size: 10,
      tableData: [],

      tableCols: [
        {
          prop: 'id',
          label: 'id',
          width: 80,
        },
        {
          prop: 'resume_id',
          label: '简历',
          slot: 'slot_resume',
        },
        {
          prop: 'company',
          label: '公司名称',
        },
        {
          prop: 'post',
          label: '职位',
        },
        {
          prop: 'salary',
          label: '薪水',
        },
        {
          prop: 'description',
          label: '描述',
        },
        {
          prop: 'join_date',
          label: '入职时间',
          width: 110,
        },
        {
          prop: 'leave_date',
          label: '离职时间',
          width: 110,
        },
      ],

      paramItems: [
        {
          type: 'select',
          label: '简历',
          prop: 'resume_id',
          name: 'resume_id',
          placeholder: '请选择简历',
          options: [],
        },
        {
          type: 'text',
          label: '公司名称',
          prop: 'company',
          name: 'company',
          placeholder: '请输入公司名称',
        },
        {
          type: 'text',
          label: '职位',
          prop: 'post',
          name: 'post',
          placeholder: '请输入职位',
        },
        {
          type: 'text',
          label: '薪水',
          prop: 'salary',
          name: 'salary',
          placeholder: '请输入薪水',
        },
        {
          type: 'text',
          label: '描述',
          prop: 'description',
          name: 'description',
          placeholder: '请输入描述',
        },
        {
          type: 'date',
          label: '入职时间',
          prop: 'join_date',
          name: 'join_date',
          placeholder: '请输入入职时间',
        },
        {
          type: 'date',
          label: '离职时间',
          prop: 'leave_date',
          name: 'leave_date',
          placeholder: '请输入离职时间',
        },
      ],
      paramRules: {
        resume_id: [
          {
            required: true,
            message: '简历名称不能为空',
          },
        ],

        company: [
          {
            required: true,
            message: '公司名称不能为空',
          },
        ],
        post: [
          {
            required: true,
            message: '职位不能为空',
          },
        ],
      },
      // 添加相关
      addParam: {
        title: '添加实习/工作经历',
        visible: false,
        close: this.close,
        callback: this.list,
        addForm: {
          resume_id: '',
          company: '',
          post: '',
          salary: '',
          description: '',
          join_date: '',
          leave_date: '',
        },
        rules: {}, //表单规则
        items: [],
      },

      // 修改相关
      editParam: {
        title: '修改实习/工作经历',
        visible: false,
        close: this.close,
        callback: this.list,
        editForm: null, //传递form表单数据
        rules: {}, //表单规则
        items: [],
      },
    }
  },

  created() {},
  mounted() {
    this.list()
    //赋值
    this.addParam.rules = JSON.parse(JSON.stringify(this.paramRules))
    this.editParam.rules = JSON.parse(JSON.stringify(this.paramRules))
    this.getResume()
  },
  methods: {
    //获取简历
    getResume(param) {
      this.postRequest('/resume/queryPage', {
        param,
      }).then((res) => {
        if (res) {
          let arr = []
          res.data.forEach((item) => {
            let param = {
              value: item.id,
              label: item.name,
            }
            arr.push(param)
          })
          this.paramItems[0].options = arr
        }
        console.log(this.paramItems[0], ' 简历')
      })
    },

    //初始化培训经历
    list(param) {
      this.postRequest('/experience/page', {
        param,
      }).then((res) => {
        console.log(res, '分页查询的数据')
        this.tableData = res.data
        this.total = res.total
        this.pages = res.pages
      })
    },
    // 当前页改变
    handleCurrentChange(page) {
      this.currentPage = page
      this.list()
    },
    // 当前size改变
    handleSizeChange(size) {
      this.size = size
      this.list()
    },
    // 查询
    search() {
      this.postRequest('/experience/page', this.searchForm).then((res) => {
        if (res) {
          console.log(res, '搜索后的数据')
          this.tableData = res.data
        }
      })
    },
    //关闭弹出框
    close() {
      this.addParam.visible = false
      this.editParam.visible = false
    },

    // 点击编辑按钮事件
    showEditView() {
      this.editParam.items = JSON.parse(JSON.stringify(this.paramItems))
      console.log(this.$refs['multipleTable'].data, '编辑事件')
      let data = this.$refs['multipleTable'].data
      console.log('编辑修改', data)
      this.editParam.editForm = data
      console.log(this.editParam.editForm)
      this.editParam.visible = true
    },
    // 删除
    del() {
      console.log(this.$refs['multipleTable'].data, '删除事件')
      let data = this.$refs['multipleTable'].data
      console.log('删除', data)
      this.$confirm(
        '此操作将永久删除实习经历：[' + data.name + '], 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          this.deleteRequest('/experience/' + data.id).then((res) => {
            if (res) {
              console.log(res, '删除=======')
              this.$message.success(res.message)
              this.list()
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    // 批量删除
    deleteMany() {
      this.selection = this.$refs['multipleTable'].selection
      console.log(this.selection, '批量删除')
      if (this.selection.length == 0) {
        this.$message.warning('请选择后再删除')
        return
      }
      this.$confirm(
        '此操作将永久删除 [' + this.selection.length + ']个职位, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          let ids = '?'
          this.selection.forEach((item) => {
            ids += 'ids=' + item.id + '&'
          })
          console.log(ids, 'ids===')
          this.deleteRequest('/experience/' + ids).then((res) => {
            if (res.code == 200) {
              this.$message.success(res.message)
              this.list()
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    // 添加按钮事件
    addBtn() {
      this.addParam.visible = true
      this.addParam.items = JSON.parse(JSON.stringify(this.paramItems))
    },
    //确定添加
    addSave(item) {
      console.log('确定添加', item)
      //   保存
      this.postRequest('/experience/', this.addParam.addForm).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.message)
          this.addParam.close() //关闭
          this.addParam.addForm = {
            resume_id: '',
            name: '',
            file: '',
            obtain_date: '',
          }
          this.addParam.callback() //重新查询
        }
      })
    },
    //修改确定
    doUpdate(item) {
      console.log(item)
      console.log('修改', this.editParam.editForm)
      this.putRequest('/experience/', this.editParam.editForm).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.message)
          this.editParam.close() //关闭

          this.editParam.callback() //重新查询
        }
      })
    },
  },
}
</script>
<style lang=""></style>